<template>
    <div>
        <web-header show="group" />
        <div class="title_a" style="padding-top: 30px">
            <div class="title_en">Theme scheme</div>
            <div class="title_cn">主题课程</div>
            <div class="title_txt">八大创新系列、100+门创新团建课程不一样的体验</div>
        </div>
        <div class="box_d" style="width: 1000px">
            <ul>
                <li>
                    <a @click="changeList(73)" href="javascript:void(0)" >
                        <img src="https://admin.hqx.com.cn/Public/Group/img/4.png" />
                        <span>旅行团建</span>
                        <span>SPORTS LEAGUE BUILDING</span>
                    </a>
                </li>
                <li>
                    <a @click="changeList(75)" href="javascript:void(0)">
                        <img src="https://admin.hqx.com.cn/Public/Group/img/1.png" />
                        <span>团建共创</span>
                        <span>TEAM BUILDING</span>
                    </a>
                </li>
                <li>
                    <a @click="changeList(78)" href="javascript:void(0)">
                        <img src="https://admin.hqx.com.cn/Public/Group/img/2.png" />
                        <span>情景体验</span>
                        <span>SITUATIONAL EXPERIENCE</span>
                    </a>
                </li>
                <li>
                    <a @click="changeList(76)" href="javascript:void(0)">
                        <img src="https://admin.hqx.com.cn/Public/Group/img/3.png" />
                        <span>经典拓展</span>
                        <span>CLASSICAL EXPANSION</span>
                    </a>
                </li>
                <li>
                    <a @click="changeList(74)" href="javascript:void(0)">
                        <img src="https://admin.hqx.com.cn/Public/Group/img/5.png" />
                        <span>户外探险</span>
                        <span>OUTDOOR ADVENTURE</span>
                    </a>
                </li>
                <li>
                    <a @click="changeList(77)" href="javascript:void(0)">
                        <img src="https://admin.hqx.com.cn/Public/Group/img/6.png" />
                        <span>赛事挑战</span>
                        <span>COMPETITION CHALLENGE</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="box_a">
            <ul>
                    <li v-for="rs in list" :key="rs.id">
                        <router-link target="_blank" :to="`/group/theme/${rs.id}`">
                            <img :src="`https://admin.hqx.com.cn/Public/Uploads/${rs.pic}`" />
                            <h3>{{rs.title}}</h3>
                            <span>{{rs.intro}}</span>
                        </router-link>
                    </li>
            </ul>
        </div>
        <web-footer />
    <back-top />
    </div>
</template>

<script setup>


import { ref, onMounted, computed } from "vue";
import {group_items} from "@/api/travel.js";
import {useRoute} from "vue-router";
const route = useRoute();

// 后续内容变多做懒加载
let list = ref([]); 
let changeList = async (type1) => {
    let res = await group_items({
        ctype: 70,
        type1,
        page: 1,
        limit: 20,
    });
    list.value = res.data;
};

onMounted(async () => {
    let ajax = {
        ctype: 70,
        page: 1,
        limit: 20,
    }
    if(route.query.id){
        ajax.type1 = route.query.id - 0;
    }
    let res = await group_items(ajax);
    list.value = res.data;
});

</script>

<style lang="scss" scoped>
// @import "../../css/main_group_theme.css";
@import "../../css/main_group_theme_list.css";
</style>
